<template>
  <header class="header-bar">
    <HeaderBar :title="route.name"></HeaderBar>
  </header>
  <div class="main">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
  <footer class="nav-bar">
    <NavBar></NavBar>
  </footer>
</template>

<script setup>
import { HeaderBar, NavBar } from './components'
import { useRoute } from 'vue-router'

const route = useRoute()

</script>

<style lang="scss" scoped>
$header-bar-height: 2.5rem;
$nav-bar-height: 3.125rem;

.header-bar {
  width: 100%;
  height: $header-bar-height;
  position: sticky;
  top: 0;
  z-index: 999;
}

.main {
  width: 100%;
  height: calc(100% - $header-bar-height - $nav-bar-height);
  overflow: auto;
}

.nav-bar {
  width: 100%;
  height: $nav-bar-height;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>
